<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{css/input.css}">
</head>
<body>
<div id="app" class="box">

    <div class="body">
    <div id="output">
        <p style="display: inline-block">这里是回答:</p>
        <div v-for="(msg, index) in message" :key="index" class="message">
            {{ msg.user }}: {{ msg.text }}
        </div>
    </div>
    <div class="question">
        <p style="display: inline-block">这里是问题:</p>
        <input type="text" id="text">
        <button @click="getAnswer" >提交</button>
    </div>

    </div>

</div>
<script>
    let ctx = '[[${#httpServletRequest.getContextPath()}]]';
</script>
<script src="https://unpkg.com/vue@3.x"></script>
<script th:src="@{jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                // question: [""],
                // message: ["你好呀！请问有什么问题需要帮助吗？"],
                message: [
                    { user: "AI", text: "你好呀！请问有什么问题需要帮助吗？" }
                ],
                inputValue:'',
            }
        },
        methods: {
            getAnswer() {
                let that = this;
                let input = document.getElementById('text');
                // that.answer = [];
                // 对输入框的值进行编码

                // that.message.push(input.value);
                that.message.push({ user: "用户", text: input.value});
                var xhr = new XMLHttpRequest();
                xhr.open('POST', '/chat');
                xhr.setRequestHeader('Content-Type', 'application/json');
                xhr.send(JSON.stringify(input.value));
                xhr.onreadystatechange = function () {
                    console.log(xhr);
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        that.message.push({ user: "AI", text: xhr.responseText });
                        // that.message.push(xhr.responseText);
                    }
                }
                that.user='';
                document.getElementById("text").value = '';
            }
        },
        created() {
            // this.getAnswer();
        }
    })
    const vm = app.mount('#app');
</script>
</body>
</html>